<template>
  <div class="app-container">
    <el-alert
        title="恭喜您,您已经实名认证成功"
        type="success"
        center
        class="mb8"
        :closable="false"
        show-icon>
      </el-alert>
    <el-card class="mb8">
      <div slot="header"><span>基本信息</span></div>
      <div class="el-table el-table--enable-row-hover el-table--medium">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item  label="商户名称" prop="bank_of_accountname">

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item  label="联系人姓名" prop="bank_of_deposit">

              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item  label="联系人电话" prop="bank_of_accountname">

              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item  label="QQ" prop="bank_of_accountname">

              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="bank_of_account">

              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card class="mb8">
      <div slot="header"><span>证件上传</span></div>
      <div class="el-table el-table--enable-row-hover el-table--medium">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item  label="营业执照" prop="bank_of_accountname">
                <el-upload :action="upload_url"
                :headers="headers"
                :on-success="handleFileSuccess"
                :before-upload="handleSetHeaders"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                list-type="picture-card"
                :limit="5"
                class="avatar-uploader">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item  label="法人身份证正面" prop="bank_of_deposit">
                <el-upload :action="upload_url"
                :headers="headers"
                :on-success="handleFileSuccess"
                :before-upload="handleSetHeaders"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                list-type="picture-card"
                :limit="5"
                class="avatar-uploader">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="身份证背面" prop="bank_of_account">
                <el-upload :action="upload_url"
                :headers="headers"
                :on-success="handleFileSuccess"
                :before-upload="handleSetHeaders"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                list-type="picture-card"
                :limit="5"
                class="avatar-uploader">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-button class="mt8" type="primary" v-hasPermi="['WorkOrderController@store']" @click="handleSubmit">提交认证信息</el-button>
    </el-card>

  </div>
</template>

<script>
import { getAuthRole, updateAuthRole } from "@/api/system/user";

export default {
  name: "AuthRole",
  data() {
    return {
       // 遮罩层
      loading: true,
      // 分页信息
      total: 0,
      pageNum: 1,
      pageSize: 10,
      // 选中角色编号
      roleIds:[],
      // 角色信息
      roles: [],
      // 用户信息
      form: {}
    };
  },
  created() {
    const userId = this.$route.params && this.$route.params.userId;
    if (userId) {
      this.loading = true;
      getAuthRole(userId).then((response) => {
        this.form = response.user;
        this.roles = response.roles;
        this.total = this.roles.length;
        this.$nextTick(() => {
          this.roles.forEach((row) => {
            if (row.flag) {
              this.$refs.table.toggleRowSelection(row);
            }
          });
        });
        this.loading = false;
      });
    }
  },
  methods: {
    /** 单击选中行数据 */
    clickRow(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.roleIds = selection.map((item) => item.roleId);
    },
    // 保存选中的数据编号
    getRowKey(row) {
      return row.roleId;
    },
    /** 提交按钮 */
    submitForm() {
      const userId = this.form.userId;
      const roleIds = this.roleIds.join(",");
      updateAuthRole({ userId: userId, roleIds: roleIds }).then((response) => {
        this.$modal.msgSuccess("授权成功");
        this.close();
      });
    },
    /** 关闭按钮 */
    close() {
      const obj = { path: "/system/user" };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>
